import React from 'react'
import {Card, Form, Table, Button, Select, Modal,message} from 'antd'
import Axios from '../../../axios'
import Utils from '../../../utils/utils'

const FormItem = Form.Item
const Option = Select.Option
export default class City extends React.Component {

    state = {
        list:[],
        isShowOpenCity:false
    }
    params = {
        page:1
    }

    componentDidMount() {
        this.requestList()
    }
    requestList(){
        let _this = this
        Axios.ajax({
            url:'/city/list',
            data:{
                page:this.params.page
            }
        }).then((res)=>{
             this.setState({
                 list: res.result.item_list.map((item,index) => {
                     item.key = index
                     return item
                 }),
                 pagination:Utils.pagination(res, (current)=>{
                     _this.params.page = current
                     _this.requestList()
                 })
             })
        })
    }

    //开通城市
    handleOpenCity = () => {
        this.setState({
            isShowOpenCity:true
        })
    }
    handleSubmit = () =>{
        let cityInfo = this.cityForm.props.form.getFieldsValue()
        console.log(cityInfo)

        Axios.ajax({
            url:'/city/open',
            data:cityInfo
        }).then((res) => {
            if(res.code == 0){
                message.success(res.msg)
                this.setState({
                    isShowOpenCity:false
                })
                this.requestList()
            } else {
                message.error(res.msg)
            }
        })
    }

    render() {
        const  columns = [
            {
                title:'ID',
                dataIndex:'id',
            },
            {
                title:'城市',
                dataIndex:'city_name',
            },
            {
                title:'用车模式',
                dataIndex:'mode',
            },
            {
                title:'营运模式',
                dataIndex:'op_mode',
            },
            {
                title:'授权加盟商',
                dataIndex:'franchisee_name',
            },
            {
                title:'城市管理员',
                dataIndex:'city_admins',
                render(record){
                    return record.map((item)=>{
                        return item.user_name
                    }).join(',')
                }
            },
            {
                title:'城市开通时间',
                dataIndex:'open_time',
            },
            {
                title:'操作时间',
                dataIndex:'update_time',
                render:Utils.formatDate
            },
            {
                title:'操作人',
                dataIndex:'sys_user_name',
            },
        ]
        return (
            <div>
                <Card>
                    <FilterForm />
                </Card>
                <Card style={{marginTop:10}}>
                    <Button type={'primary'} onClick={this.handleOpenCity}>开通城市</Button>
                </Card>
                <div className={"content-wrap"}>
                    <Table
                        columns={columns}
                        dataSource={this.state.list}
                        pagination={this.state.pagination}
                        bordered={true}
                    />
                </div>
                <Modal
                    title={"开通城市"}
                    visible={this.state.isShowOpenCity}
                    onCancel={() => {
                        this.setState({
                            isShowOpenCity:false
                        })
                    }}
                    onOk={this.handleSubmit}
                >
                    <OpenCity
                        wrappedComponentRef = {(form)=>{
                            this.cityForm = form
                        }}
                    />
                </Modal>
            </div>
        )
    }

}

class FilterForm extends React.Component {

    render() {
        const {getFieldDecorator} = this.props.form
        return (
            <Form layout={'inline'}>
                <FormItem label={"城市"}>
                    {
                        getFieldDecorator('city_id')(
                            <Select
                                placeholder={"全部"}
                                style={{width:120}}
                            >
                                <Option value={""}>全部</Option>
                                <Option value={"1"}>江苏省</Option>
                                <Option value={"2"}>北京市</Option>
                                <Option value={"3"}>上海市</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label={"用车模式"}>
                    {
                        getFieldDecorator('mode')(
                            <Select
                                placeholder={"全部"}
                                style={{width:120}}
                            >
                                <Option value={""}>全部</Option>
                                <Option value={"1"}>指定停车点模式</Option>
                                <Option value={"2"}>禁停区模式</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label={"营运模式"}>
                    {
                        getFieldDecorator('op_mode')(
                            <Select
                                placeholder={"全部"}
                                style={{width:120}}
                            >
                                <Option value={""}>全部</Option>
                                <Option value={"1"}>自营</Option>
                                <Option value={"2"}>加盟</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label={"加盟商授权状态"}>
                    {
                        getFieldDecorator('auth_status')(
                            <Select
                                placeholder={"全部"}
                                style={{width:120}}
                            >
                                <Option value={""}>全部</Option>
                                <Option value={"1"}>已授权</Option>
                                <Option value={"2"}>未授权</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button type={'primary'}>查询</Button>
                    <Button>重置</Button>
                </FormItem>

            </Form>
        )
    }
}
//绑定之后重新赋值
FilterForm = Form.create({})(FilterForm)


class OpenCity extends React.Component{

    render() {
        const formItemLayout = {
            labelCol:{
                span:5
            },
            wrapperCol:{
                span:19,
            }
        }
        const  { getFieldDecorator } = this.props.form
        return (
            <Form layout={'horizontal'}   {...formItemLayout}>
                <FormItem label={"选择城市"}>
                    {
                        getFieldDecorator('city_id', {
                            initialValue:"1"
                        })(
                            <Select
                                placeholder={"全部"}
                                style={{width:120}}
                            >
                                <Option value={""}>全部</Option>
                                <Option value={"1"}>江苏省</Option>
                                <Option value={"2"}>北京市</Option>
                                <Option value={"3"}>上海市</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label={"营运模式"}>
                    {
                        getFieldDecorator('op_mode', {
                            initialValue:"1"
                        })(
                            <Select
                                placeholder={"全部"}
                                style={{width:120}}
                            >
                                <Option value={"1"}>自营</Option>
                                <Option value={"2"}>加盟</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label={"用车模式"}>
                    {
                        getFieldDecorator('mode', {
                            initialValue:"1"
                        })(
                            <Select
                                placeholder={"全部"}
                                style={{width:120}}
                            >
                                <Option value={"1"}>指定停车点</Option>
                                <Option value={"2"}>禁停区</Option>
                            </Select>
                        )
                    }
                </FormItem>
            </Form>
        )
    }
}
OpenCity = Form.create({})(OpenCity)
